
import React, { useState, useContext, useCallback, forwardRef } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from '@common/presentational/CustomizeModal'
import { useDispatch } from 'react-redux'
import { Row, Col, Input } from 'antd'
import { getBilinInfo } from '@utils/localStorage'
import notify from '@utils/tip'
import { createCustomerMemberDiscount, editCustomerMemberDiscount } from '@sagas/customer'
import InputNumberWithSuffix from "@common/presentational/InputNumberWithSuffix";

const DiscountContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const { callback } = props
    const pStoreId = getBilinInfo('storeId') || 0
    const owner_type = pStoreId ? 'store' : 'brand'
    const owner_id = pStoreId
    const {
        id,
        out_card_id,
        name,
        offer_category = 'preferential',
        need_verify_qualification = false,
        use_scenes = ['ordering'],
        scope = 'unlimited'
    } = params
    const [discount, setDiscount] = useState(params.discount ? params.discount / 10 : '');

    const dispatch = useDispatch()

    const submit = () => {
        if (!discount) {
            notify('请输入折扣', 'error')
            return
        } else if (discount <= 0 || discount > 10) {
            notify('折扣大于0小于10', 'error')
            return
        }
        dispatch(id ? editCustomerMemberDiscount({
            id,
            name,
            offer_category,
            need_verify_qualification,
            use_scenes,
            scope,
            discount: discount * 10,
            owner_type,
            owner_id,
        }, () => {
            callback && callback()
        }) : createCustomerMemberDiscount({
            out_card_id,
            name,
            offer_category,
            need_verify_qualification,
            use_scenes,
            scope,
            discount: discount * 10,
            owner_type,
            owner_id,
        }, () => {
            callback && callback()
        }))
        hide()
    }

    const discountChange = useCallback(value => {
        setDiscount(value)
    }, [])

    return (
        <>
            <Row className="modal-line">
                <Col span={4}>
                    <span className='ft-clr-d'>折扣优惠</span>
                </Col>
                <Col span={20}>
                    {/* <Input placeholder='输入折扣' maxLength={3} value={discount} suffix={<span>折</span>} onChange={discountChange} /> */}
                    <InputNumberWithSuffix
                        min={0.1}
                        max={9.9}
                        step={1}
                        precision={1}
                        value={discount}
                        onChange={discountChange}
                        placeholder="请输入折扣"
                        style={{ width: '280px' }}
                        suffix={(
                            <span>折</span>
                        )}
                    />
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submit}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal width={500} title="设置折扣" ref={ref}>
        <DiscountContent {...props} />
    </CustomizeModal>
))
